前言：

今天是第26天啦，阿森在整個開發的部分也差不多完成了，準備進入最後上架測試階段！

在上架的部分阿森選擇使用firebase來當host，因為使用起來真的滿方便的，免費的額度也很高，拿來測試幾乎不用付到什麼錢。正式上架的計費阿森也覺得滿ok的，所以在這裡推薦給大家！

費用部分：

關於詳細的計費方式可以直接到官方網站：

https://firebase.google.com/pricing

幾個重點大概是免費版的spark專案一個月可以提供：

1G的儲存空間

10G的下載量

20k寫

50k讀

20k刪

而付費版的Blaze專案一個月計費是：

0.18usd/GB的儲存計費

0.026usd/GB的下載計費

跟我們的需求換算下來其實很划算。

怎麼deploy：

再來就說到怎麼上架你的網站了，首先我們先到firebase：

https://firebase.google.com

可以直接用google帳戶登入。

然後新增一個專案：

再來我們打開終端機，輸入這串:

npm i -g firebase-tools

接著輸入：

firebase login

應該會跳出Firebase CLI要求登入的頁面，這裡當然是用你的google帳號登入。

然後我們到專案的終端機輸入：

firebase init

像這樣：

再來會依序問幾個set up和deploy的問題：

? Please select an option:

Use an existing project

? Select a default Firebase project for this directory:

這裡選你剛剛新增的firebase專案

i  Using project 你的firebase專案

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory?

build

? Configure as a single-page app (rewrite all urls to /index.html)?

Yes

? Set up automatic builds and deploys with GitHub?

No

? File public/index.html already exists. Overwrite?

No

i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...

i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

都完成之後就表示他已經成功連上你的firebase了。

然後我們要使用這串：

npm run build

跑完一大堆東西後會出現：

這時候我們輸入最後一串指令：

firebase deploy

看到complete就成功了喔！

https://dnms-93f6b.web.app

可以到他預設的url預覽自己的網站，也可以傳給其他人一起測試，這樣比起前面的ngrok會快許多，也更符合之後上架的狀態。

小結：

今天介紹了如何在firebase上架react網站，希望這個好用的工具能幫到各位！

那就先這樣，我們明天見！